<template>
	<view>
		<view class="title">
			发现更多好物
			<text class="iconfont icon-fanhui" @click="result"></text>
			<text class="share" @click="cshare(['fade'])">分享</text>
		</view>
		<view class="banner">
			<banner :rotation="rotation" :height="700"></banner>
		</view>
		<view class="content">
			<view class="author">
				<image src="/static/images/t.png" mode="widthFix"></image>
				<view class="info-pname">
					<view class="name">Fend</view>
					<view class="date">2020-03-14</view>
				</view>
			</view>
			<view class="stitle">好皮肤离不开夜间修复力</view>
			<view class="details">
				使用方法<br/>
				使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法
				使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法
				使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法使用方法
			</view>
			<view class="comment">
				<view class="ctitle">
					<text>用户评论</text>
					<text class="write" @click="ccomment(['fade'])">写评论</text>
				</view>
				<view v-if="list.length>0">
					<view class="ccontent" v-for="(item,index) in list" :key="index">
						<view class="author">
							<image :src="item.img" mode="widthFix"></image>
							<view class="info-pname">
								<view class="name">{{item.name}}</view>
								<view class="date">{{item.date}}</view>
							</view>
						</view>
						<view class="cdetails">{{item.cdetails}}</view>
					</view>	
					<view class="none">没有更多了</view>
				</view>		
				<view class="cnone" v-if="list.length==0">
					快来发表你的评论吧~
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="like" @click="change">
				<text :class="'iconfont '+(collect?'icon-1_music90':'icon-1_music89')"></text>
				<text>喜欢 &#8226 {{znum}}</text>
			</view>
			<view class="fcomment" @click="ccomment(['fade'])">
				<text class="iconfont icon-pinglun"></text> 
				<text>评论</text>
			</view>
			<view class="cart" @click="cproduct(['zoom-in','slide-bottom','fade'])">
				<text class="iconfont icon-gouwuche"></text>
				<text class="cnum">商品<!--（{{plist.length}}）--></text>
			</view>
		</view>
		<!-- 遮罩 -->
		<uni-transition :mode-class="['fade']" class="zhe" :show="zhe" @click="cancel" />
		<uni-transition :duration="150" :mode-class="modeClass" :show="comment" >
			<view class="creatc">
				<view class="creatt">
					<textarea maxlength="200" placeholder="写评论..." focus="true" fixed="true" class="creattext"  v-model="plText"></textarea>
					<view class="textnum" :style="plText.length>199?'color: #ff427e;':''" >{{plText.length}}/200</view>
				</view>			
				<view class="btn">
					<view class="cancel" @click="cancel">取消</view>
					<view class="send" @click="send">发送</view>
				</view>
			</view>
		</uni-transition>
		<uni-transition :duration="400" :mode-class="modeClass" :styles="transfromClass" :show="product" >
			<!--<view class="product">
				<view class="ptitle">{{plist.length}}个商品</view>
				<text class="iconfont icon-guanbi" @click="cancel"></text>
				<view class="ppcontent">
					<view class="pcontent" v-for="(item,index) in plist">
						<image :src="item.img" mode="widthFix"></image>
						<view>
							<view class="pname">{{item.pname}}</view>
							<view class="flex">
								<view class="price">
									<view class="nprice">￥<text>{{item.nprice}}</text></view>
									<view class="oprice">￥<text>{{item.oprice}}</text></view>
								</view>							
								<view class="buy">立即购买</view>
							</view>
						</view>
					</view>
					<view class="none">没有更多了</view>
				</view>	
		
			</view> -->
			
			<view class="product">
				<text class="iconfont icon-guanbi" @click="cancel"></text>
				<view class="ppcontent">
						<guess></guess>
				</view>	
			</view>
		</uni-transition>
		<uni-transition :duration="150" :mode-class="modeClass" :show="share" >
			<view class="share" >
				<view class="scontent">
					<image src="../../static/images/5.jpg" mode="widthFix"></image>
					<view class="stitle">阿玛尼来了</view>
					<view class="scon">
						正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红
						正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红
						正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红
						正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红
						正红色我心中的正红正红色我心中的正红的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红正红色我心中的正红
					</view>
				</view>
				<view class="sfooter">
					<view class="sfootert flex">
						<view class="sflist" >
							<button openType="share" class="sflist">
								<image src="../../static/images/wei.png" mode="widthFix"></image>
								<view>微信</view>
							</button>
						</view>
						<!--<view class="sflist" @click="fx">
							<image src="../../static/images/friend.png" mode="widthFix"></image>
							<view>朋友圈</view>
						</view>-->
					</view>
					<view class="sfooterb" @click="cancel">
						取消
					</view>
				</view>
			</view>
		</uni-transition>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//页面轮播
				rotation:[
					{
					 'img':'/static/images/p1.jpg'
					},
					{
					 'img':'/static/images/p1.jpg'
					}
				],
				//评论
				list:[
					{
						'img':'/static/images/t.png',
						'name':'Fend',
						'date':'2020-03-14',
						'cdetails':'好用'					
					},
					{
						'img':'/static/images/t.png',
						'name':'Fend',
						'date':'2020-03-14',
						'cdetails':'好用'					
					}
				],
				//商品
				plist:[
					{
						'img':'/static/images/pp1.jpg',
						'pname':'精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精华露精露精华露精华露精华华',
						'nprice':'759.00',
						'oprice':'850.00'											
					},
					{
						'img':'/static/images/pp1.jpg',
						'pname':'精华露',
						'nprice':'759.00',
						'oprice':'850.00'											
					}
				],
				collect:false,
				znum:8,
				zhe:false,
				comment:false,
				product:false,
				share:false,
				//写评论数据
				plText:'',
				//动画方式
				modeClass: ['fade'],
				transfromClass: {
					'position': 'fixed',
					'z-index':'999',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0
				}
			}
		},
		onShareAppMessage(res) {
			  return {
				title: '分享',
				path: 'pages/product/product',
			  }
		},
		methods: {
			// 评论发送
			send(){
				this.list.unshift({
						'img':'/static/images/t.png',
						'name':'Fend',
						'date':'2020-04-22',
						'cdetails':this.plText					
				})
				this.zhe=false
				this.comment=false
			},
			//返回上一页
			result(){
				uni.navigateBack({
					 delta: 1
				});
			},
			//点赞
			change(){
				this.collect=!this.collect
				if(this.collect)
					this.znum=Number(this.znum)+1
				else
					this.znum=Number(this.znum)-1
			},
			cancel(){
				this.zhe=false
				this.comment=false
				this.product=false
				this.share=false
			},
			ccomment(mode){
				this.modeClass = mode
				this.zhe=true
				this.comment=true
			},
			cproduct(mode){
				this.modeClass = mode
				this.zhe=true
				this.product=true
			},
			cshare(mode){
				this.modeClass = mode
				this.zhe=true
				this.share=true
			},
			fx(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 2,
				    imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			}
			
			
		}
	}
</script>

<style  lang="scss">
@import '../find/uni.scss';	
page{
	color: #353535;
	background: #fff;
}
.title{
	color: #3c3c3c;
	font-size: 32rpx;
	text-align: center;
	line-height: 100rpx;
	border-bottom: 1px solid #dbdbdb;
	font-weight: bold;
	position: fixed;
	top: 0;
	width: 100%;
	background: #f3f3f3;
	z-index: 99;
}
.title .iconfont{
	position: absolute;
	left: 20rpx;
	font-size: 30rpx;
}
.share{
	position: absolute;
	right: 20rpx;
	font-weight: normal;
	font-size: 25rpx;
}
.banner{
	margin-top: 100rpx;
}
.content{
	padding: 0 20rpx;
	margin-bottom: 100rpx;
}
.author{
	display: flex;	
	padding: 20rpx 0;
}
.author image{
	width: 45rpx;
	padding:10rpx 20rpx 0 0;
}
.name{
	font-size: 26rpx;
}
.date{
	font-size: 24rpx;
	color: #949494;
}
.stitle{
	font-size: 32rpx;
	font-weight: bold;
	padding: 20rpx 0;
}
.details{
	line-height: 40rpx;
	font-size: 26rpx;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #f5f5f5;
}
.ctitle{
	font-size: 30rpx;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
}
.write{
	color: #ff427e;
}
.ccontent{
	padding-bottom: 20rpx;
	border-bottom: 1px solid #f5f5f5;
}
.none{
	color: #cfcfcf;
	text-align: center;
	line-height: 100rpx;
}
.cnone{
	line-height: 200rpx;
	color: #cfcfcf;
	text-align: center;
}
.footer{
	width: 100vw;
	line-height: 100rpx;
	border-top: 1px solid #f5f5f5;
	position: fixed;
	bottom: 0;
	display: flex;
	background: #fff;
}
.footer .iconfont{
	padding-right: 5rpx;
}
.like{
	width: 30vw;
	text-align: center;
}
.fcomment{
	width: 25vw;
	text-align: center;
}
.cart{
	width: 190rpx;
	height: 65rpx;
	line-height: 65rpx;
	border-radius: 50rpx;
	background: linear-gradient(45deg,#f8a583,#ff4172);
	color: #fff;
	text-align: center;
	position: absolute;
	top: 18rpx;
	right: 20rpx;
}
.cnum{
	position: relative;
	top: -3rpx;
}
.icon-1_music90{
	color: #ff3546;
}
.zhe{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 100;
	background: rgba(0,0,0,.5);
}
uni-transition{
	z-index: 101;
}
.creatc{
	z-index: 101;
	width: 90vw;
	height: 450rpx;
	background: #fff;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	padding: 40rpx;
	box-sizing: border-box;
}
.creattext{
	background: #efefef;
	width: 100%;
	height: 300rpx;
	line-height: 60rpx;
	padding: 10rpx 10rpx 50rpx;
	box-sizing: border-box;
}
.creatt{
	position: relative;
}
.textnum{
	position: absolute;
	bottom: 0;
	right: 0;
	color: #bababa;
	padding: 20rpx;
}
.btn{
	display: flex;
	justify-content: space-between;
}
.cancel{
	color:#bababa;
}
.send{
	color: #ff427e;;
}
.product{
	position: fixed;
	z-index: 101;
	bottom: 0;
	width: 100vw;
	height: 600rpx;
	background: #f8f8f8;
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;
}
.ptitle{
	width: 100vw;
	line-height: 100rpx;
	text-align: center;
	background: #fff;
	border-bottom: 1px solid #f5f5f5;
	position: absolute;
	top: 0;
}
.ppcontent{
	margin-top: 100rpx;
	height: 500rpx;
	overflow-y: auto;
}
.product .iconfont{
	position: absolute;
	right: 20rpx;
	top: 35rpx;
}
.pcontent{
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1px solid #f5f5f5;
	background: #fff;
}
.pcontent image{
	width: 25vw;
	padding: 0 5vw;
}
.pcontent>view{
	width: 60vw;	
	padding-right: 5vw;
}
.pname{
	height: 105rpx;
	line-height: 35rpx;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical; 
	-webkit-line-clamp: 3;
}
.pcontent .flex{
	padding-top: 20rpx;
	justify-content: space-between;
}
.pcontent .flex .price{
	display: flex;
	padding-top: 15rpx;
}
.nprice{
	color: #fc4341;
	font-size: 12rpx;
}
.oprice{
	color: #a0a0a0;
	font-size: 12rpx;
	text-decoration: line-through;
	padding-left: 20rpx;
}
.nprice>text{
	font-size: 32rpx;
}
.oprice>text{
	font-size: 28rpx;	
}
.buy{
	width: 150rpx;
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 30rpx;
	background: #f54641;
	text-align: center;
	color: #fff;
}
.scontent{
	width: 80vw;
	height: 60vh;
	position: fixed;
	background: #fff;
	left: 0;
	right: 0;
	top: 10vh;
	margin: auto;
	z-index: 101;
	box-sizing: border-box;
	padding: 40rpx;
	overflow-y: auto;
}
.scontent image{
	width: 90%;
	display: block;
	margin: 0 auto 20rpx;
}
.scon{
	line-height: 40rpx;
	font-size: 26rpx;
}
.sfooter{
	width: 100vw;
	height: 295rpx;
	position: fixed;
	background: #fff;
	bottom: 0;
	left: 0;
	z-index: 101;
}
.sfootert{
	width: 70vw;
	margin: 0 auto;
	padding-top: 30rpx;
	justify-content: space-around;	
}
.sflist{
	text-align: center;
	color: #6f6f6f;
	font-size: 24rpx;
}
.sflist image{
	width: 80rpx;
	padding-bottom: 20rpx;
}
.sflist button{
	background: #fff;
}
.sflist button view{
	position: relative;
	top: -14rpx;
}
.sfooterb{
	line-height: 100rpx;
	color: #9a9a9a;
	font-size: 30rpx;
	text-align: center;
	border-top: 1px solid #f5f5f5;
}
</style>
